<template>
    <div class="swiper-box">
<van-swipe :autoplay="3000" lazy-render  >
  <van-swipe-item v-for="image in images" :key="image">
    <img :src="image.pic" />
  </van-swipe-item>
</van-swipe>
    </div>
</template>

<script lang="ts">
import axios from "axios"
import {defineComponent, onMounted,reactive,toRefs} from "vue"
import {getBannerList} from "../../utils/api.js"


export default defineComponent({
setup() {
    const state=reactive(
        {
            images:[]
        }
    )
onMounted(()=>{
    
getBannerList({type:2}).then((response)=>{
    console.log(response)
   if(response.data&&response.data.code==200){
    // response.data.banners.forEach(item=>{
    //     state.images.push(item.pic)
    // })
 state.images=response.data.banners

   }
   
},(err)=>{
    console.log(err)
})
})
return {
...toRefs(state)
};
},
});
</script>

<style lang="less" scoped>
.swiper-box{
    padding: 10px;
.van-swipe{
    width: 100%;
    border-radius: 0.3rem;
    .van-swipe__track{
        .van-swipe-item{
            img{
                width: 100%;
                height:4rem
            }
        }
    }
}
}

</style>